<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>博客管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
        </el-breadcrumb>        
        <el-card>
            <h1>分类管理</h1>
            <el-row>
                <el-col>
                    <el-button type="success" @click="addDialogVisible = true">添加分类</el-button>
                </el-col>
            </el-row>
            <el-table :data="categoaryList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="分类信息" width="300px" prop="categoary"></el-table-column>
                <el-table-column label="博客数量" width="100px" prop="number"></el-table-column>
                <el-table-column label="博客名称">
                    <template slot-scope="scope">
                        <span v-for="blog in scope.row.blogs" :key="blog.id">
                            <el-tag type="info">{{blog}} </el-tag>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column width="250px" label="操作">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-edit" circle @click="modifyCategoary(scope.row.id)"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteCategoary(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 修改分类对话框 -->
        <el-dialog title="修改分类" :visible.sync="editDialogVisible" width="50%">
            <el-form :model="editList" ref="editFormRef" label-width="70px">
                <el-form-item label="分类信息" prop="categoary">
                    <el-input v-model="editList.categoary"></el-input>
                </el-form-item>
                <el-form-item label="博客数量" prop="number">
                    <el-input v-model="editList.number" disabled=""></el-input>
                </el-form-item>
                <el-form-item label="博客名称" prop="blogs">
                    <el-input v-model="editList.blogs"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCategoary">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加用户的对话框 -->
        <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%">
            <el-form :model="addForm" :rules="FormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="分类名称" prop="categoary">
                    <el-input v-model="addForm.categoary"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCategoary">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 所有分类列表信息
            categoaryList: [],
            // 编辑分类窗口可视化
            editDialogVisible: false,
            // 添加分类窗口可视化
            addDialogVisible: false,
            // 编辑分类信息
            editList: {},
            // 添加分类
            addForm: {},
            // 某个分类下的博客名称
            title: []
        }
    },
    created() {
        this.getCategoaryList()
    },
    methods: {
        async addCategoary() {
            const { data: result } = await this.$http.post('add/categoary', {
                categoary: this.addForm.categoary
            })
            if(result.meta.status !== 200) return this.$message.error('添加博客分类失败！')
            this.$message.success('添加博客分类成功！')
            this.addDialogVisible = false
        },
        deleteCategoary(id) {
            const { data: result } = await this.$http.delete('delete/categoary', {
                id: this.addForm.id
            })
            if(result.meta.status !== 200) return this.$message.error('删除博客分类失败！')
            this.$message.error('删除博客分类成功！')
            this.getCategoaryList()
        },
        modifyCategoary(id) {
            this.categoaryList.forEach(data => {
                if(data.id === id) {
                    this.editList = data
                }
            })
            this.editDialogVisible = true
        },
        async getCategoaryList() {
            const { data: result } = await this.$http.get('/categoarylist')
            if(result.meta.status !== 200) {
                return this.$message.error('获取列表失败')
            }
            this.categoaryList = result.data
        },
        async editCategoary() {
            const { data: result } = await this.$http.post('/update/categoary', {
                id: this.editList.id,
                blogs: this.editList.blogs,
                categoary: this.editList.categoary
            })
            if(result.meta.status !== 200) {
                return this.$message.error('更新用户状态失败！')
            }
            this.$message.success('更新用户状态成功！')
            this.getCategoaryList()
            this.editDialogVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
.el-tag{
    margin-right: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}
</style>
